<template>
    <h3>数组变更监听</h3>
    <!-- 变更方法：
    1.push()、pop()、shift()、unshift()、splice()、sort()、reverse()会改变原数组
    替换一个数组方法
    filter() concat() slice()这些不会改变原数组,而是返回一个新数组,所以需要赋值给老数组 -->
    <div> 
        <ul>
            <li v-for="(name,index) in names" :key="index">{{ name }}</li>
        </ul>
        <button @click="addList">添加数据</button>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                names:["张三","李四","王五"]
            }
        },
        methods:{
            
            addList(){
                //引起ui自动更新
                this.names.push("赵六")
                //不会引起ui自动更新,需重新赋值
                this.names = this.names.concat("赵六")
            }
        }
    }
</script>